<template>
  <div class="course-detail-container">
    <div class="main-content">
      <!-- 课程主要内容区域 -->
      <div class="course-header">
        <h1>{{ courseInfo.name }}</h1>
        <p class="teacher-info">授课教师：{{ courseInfo.teacherName }}</p>
      </div>

      <div class="course-content">
        <!-- 动态显示不同标签页内容 -->
        <component :is="currentTabComponent" :courseId="courseId" />
      </div>
    </div>

    <!-- 侧边目录 -->
    <div class="side-menu">
      <el-menu
          :default-active="activeTab"
          class="side-menu-nav"
          @select="handleMenuSelect"
      >
        <el-menu-item index="ai-assistant">
          <el-icon><ChatDotRound /></el-icon>
          <span>AI助教</span>
        </el-menu-item>
        <el-menu-item index="chapters">
          <el-icon><Document /></el-icon>
          <span>章节</span>
        </el-menu-item>
        <el-menu-item index="materials">
          <el-icon><Folder /></el-icon>
          <span>资料</span>
        </el-menu-item>
        <el-sub-menu index="activities">
          <template #title>
            <el-icon><Calendar /></el-icon>
            <span>课程活动</span>
          </template>
          <el-menu-item index="qna">问答</el-menu-item>
          <el-menu-item index="checkin">签到</el-menu-item>
          <el-menu-item index="discussion">讨论</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import request from '@/utils/request'
import {
  ChatDotRound,
  Document,
  Folder,
  Calendar
} from '@element-plus/icons-vue'

// 导入各个标签页组件
import AiAssistant from './components/AiAssistant.vue'
import Chapters from './components/Chapters.vue'
import Materials from './components/Materials.vue'
import QnA from './components/QnA.vue'
import CheckIn from './components/CheckIn.vue'
import Discussion from './components/Discussion.vue'

const route = useRoute()
const courseId = route.params.id
const activeTab = ref('ai-assistant')
const courseInfo = ref({})

// 动态组件映射
const tabComponents = {
  'ai-assistant': AiAssistant,
  'chapters': Chapters,
  'materials': Materials,
  'qna': QnA,
  'checkin': CheckIn,
  'discussion': Discussion
}

const currentTabComponent = computed(() => {
  return tabComponents[activeTab.value] || AiAssistant
})

// 获取课程详情
const fetchCourseDetail = async () => {
  try {
    const res = await request.get(`/course/detail/${courseId}`)
    if (res.code === '200') {
      courseInfo.value = res.data
    }
  } catch (error) {
    console.error('获取课程详情失败:', error)
  }
}

// 菜单选择处理
const handleMenuSelect = (index) => {
  activeTab.value = index
}

onMounted(() => {
  fetchCourseDetail()
})
</script>

<style scoped>
.course-detail-container {
  display: flex;
  min-height: calc(100vh - 60px);
}

.main-content {
  flex: 1;
  padding: 20px;
  background: #f5f7fa;
}

.course-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e6e6e6;
}

.teacher-info {
  color: #666;
  font-size: 14px;
}

.side-menu {
  width: 220px;
  background: #fff;
  border-right: 1px solid #e6e6e6;
  height: 100vh;
  position: sticky;
  top: 0;
}

.side-menu-nav {
  border-right: none;
}

.course-content {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
</style>